<template>
  <div class="waitingAccepting">
    <div class="waitingAccepting-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/agent/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >待接订单</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btns fr">
        <el-button @click="quickApply" class="mr20" v-no-more-click:3000>快速申请</el-button>
        <table-search
          class='clearfloat'
          ref="table-search"
          :isGetAgent='true'
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>
    <div class="waitingAccepting-main">
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        v-loading="loading"
        height='100%'
        @row-click='selectRow'
        @sort-change='tableSortChange'>

        <el-table-column show-overflow-tooltip v-if="roleID == 1 || roleID == 4 || roleID == 7" prop="created_at" label="等待接单时长(天)" width="160" align="center" sortable >
					<template slot-scope="scope">
						<span :class="getOrderTime(scope.row.created_at) > 2 ? 'font_danger' : ''">{{getOrderTime(scope.row.created_at)}}</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip sortable='custom' prop="order_number" label="订单编号" min-width="180" align="center"></el-table-column>
				<el-table-column show-overflow-tooltip prop="status" label="流程状态" min-width="120" align="center" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip prop="patent_name" label="拟申报专利名称" min-width="180" sortable='custom' align="center"></el-table-column>
				<el-table-column show-overflow-tooltip prop="type" label="专利类型" min-width="130" sortable='custom' align="center"></el-table-column>
				<el-table-column
					label="附图"
					sortable='custom'
					min-width="150"
					align="center">
					<template slot-scope="scope">
						<div v-if="scope.row.imgArr" class="img-wrap" @click.stop>
							<pre-img
								:smallImg="scope.row.imgArr"
								:bigImg="scope.row.imgArr2"
								class="pre-img">
							</pre-img>
						</div>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="liaisons" label="联络人" min-width="100" align="center" sortable='custom'>
					<template slot-scope="scope">
						<span>{{scope.row.liaisons}}</span>
						<Tooltip  v-if="$store.state.user.is_teacher == 1"  content="点我留言">
							<i class="el-icon-chat-dot-round leaveWord"  @click.stop="leaveWord(scope.row, '1')"></i>
						</Tooltip>
					</template>
				</el-table-column>
				<div v-if="roleID != 2">
					<el-table-column show-overflow-tooltip prop="user_name" label="发明人" width="120" sortable='custom'
						align="center"></el-table-column>
					<el-table-column show-overflow-tooltip prop="patent_user" label="专利权人" width="120" sortable='custom'
						align="center"></el-table-column>
				</div>
				<el-table-column show-overflow-tooltip prop="liaisons_tel" label="电话" min-width="120" align="center" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip prop="liaisons_email" label="邮箱" min-width="150" align="center" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip v-if="roleID != 2" prop="remarks" label="备注" min-width="120" align="center" sortable='custom'></el-table-column>
				<el-table-column show-overflow-tooltip label="专属顾问"  min-width="110" prop="process" align="center" sortable>
					<template slot-scope="scope">
						<!-- <span v-if="roleID == 4">{{ scope.row.process ? scope.row.process.name : '' }}</span> -->
						<span>{{ scope.row.process | processNumber }}</span>
						<Tooltip  v-if="$store.state.user.is_teacher == 1"  content="点我留言">
							<i class="el-icon-chat-dot-round leaveWord"  @click.stop="leaveWordL(scope.row, '2')"></i>
						</Tooltip>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="submitTime" label="提交时间" min-width="160" align="center" sortable >
					<template slot-scope="scope">{{ findData(scope.row) }}</template>
				</el-table-column>
      </el-table>
    </div>
    <div class="waitingAccepting-bottom">
      <pagination @paginationChange="paginateChange" :total="total"></pagination>
    </div>
    <waitingAcceptingInfo ref="waitingAcceptingInfo" @refresh='getTableData'/>
    <!-- 留言框 -->
    <el-dialog
      title="留言"
      :visible.sync="showRefund4"
      center
      @close="leaveWordClose"
      class="leaveWordDialog"
    >
      <span class="leaveWord-label">请输入你的留言</span>
      <el-input type="textarea" v-model="leaveWordText"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button v-no-more-click:3000 type="warning" size="small" @click="cancel">取消</el-button>
        <el-button
          v-no-more-click:3000
          @click="submitLeaveWord"
          type="primary"
          size="small"
          :loading="isLeaveWord"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import preImg from '~/components/pre-img'
import waitingAcceptingInfo from './components/waitingAccepting-info'
import { getMyInfo } from "~/api/user"
export default {
  components: {
    Pagination,
    tableSearch,
    preImg,
    waitingAcceptingInfo
  },
  data () {
    return {
      isLeaveWord: false,
      showRefund4: false,
      leaveWordText:'',
      privateLetterId:'',
      tableData:[],
      loading: false,
      pageSize: 25, //一页可以几条
      total: 0,
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '专利类型',
          props: 'type'
        },
        {
          label: '案件名称',
          props: 'name'
        },
        {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '扣款情况',
          props: 'deduction'
        },
        {
					label: '专属顾问',
					props: 'process_id'
				},
        {
          label: '案件奖励',
          props: 'reward'
        },
        {
          label: '结算金额',
          props: 'settlements_price'
        },
        {
          label: '结算状态',
          props: 'settlement_status'
        },
        {
          label: '结算类型',
          props: 'settlements_name'
        },
    
        {
          label: '定稿时间',
          props: 'createdTime'
        }
      ],
      paramsByOrder: {
				status: "待接单"
			},
      myInfo: {
        last_mon_total: 0,
        mon_total:0
      },
      roleID: 2,
    }
	},
	watch: {
		tableData: {
			handler: function(val) {
				val.forEach(v => {
					v.imgArr = []
					v.imgArr2 = []
					if (v.thumb_imgs) {
						let arr = v.thumb_imgs.split('&')
						if (v.img) {
							let arr = v.img.split('&')
							for (let i in arr) {
								v.imgArr2.push(this.baseUrl + '/storage/upload/' + arr[i])
							}
						}
						for (let i in arr) {
							v.imgArr.push(this.baseUrl + '/storage/upload/' + arr[i])
						}
					}
				})
			},
			immediate: true
		},

	},
  created () {
    this.getTableData()
  },
  methods: {
    quickApply () {
      this.$router.push('/user/apply?sumbit_type=2')
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
			}
			if (!this.paramsByOrder.process_id) {
				if (this.$store.state.user.role_id == 4) {
					this.paramsByOrder.process_id = this.$store.state.user.id;
				}
			}
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.loading = true
      this.$axios.get('api/order', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          // this.getMyinfo()
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },

    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.createdTime) {
        params.created_start_time = params.createdTime[0]
        params.created_end_time = params.createdTime[1]
        delete params.createdTime
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'asc'
      } else {
        delete this.paramsByOrder.sort_str
        delete this.paramsByOrder.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
		},
		leaveWord(row) {
      console.log(row)
      if (row.finals_id) {
        this.finals_id = row.finals_id
      } else {
        this.order_id = row.id
      }
      this.showRefund4 = true;
      this.privateLetterId = row.consumer_id;
    },
    leaveWordL (row) {
      if (row.finals_id) {
        this.finals_id = row.finals_id
      } else {
        this.order_id = row.id
      }
      this.showRefund4 = true;
      this.privateLetterId = row.process_id;
    },
    leaveWordClose() {
      this.leaveWordText = "";
    },
    cancel() {
      this.showRefund4 = false;
    },
    submitLeaveWord() {
      let that = this;
      let params = {
          news: that.leaveWordText,
          receive_uid: that.privateLetterId
      }
      if (that.finals_id) {
        params.finals_id = that.finals_id
      } else {
        params.order_id = that.order_id
      }
      that.$axios.post('api/news/add_private_letter', params).then(res => {
        if (res.data.code == 200) {
          that.$message({
            type: 'success',
            message:"发送留言信息成功！"
          })
          this.showRefund4 = false;
          that.leaveWordText = ''
          setTimeout(() => {
            that.quit(res.data.data)
          }, 1000)
        }
      })
    },
    quit(data){
      // console.log(data)
      this.$router.push({
        path: '/agent/news/communication',
        query:{
          data:JSON.stringify(data)//对象转为字符串
        }
      });
    },
		// 时间
		findData(val) {
			let statusArr = val.statuss;
			let statusTime = "";
			for (const i in statusArr) {
				if (statusArr[i].id == 1) {
					statusTime = statusArr[i].pivot.created_at;
				}
			}
			return statusTime;
		},
    selectRow (row) {
      if(window.getSelection().toString() === ''){
        this.$refs['waitingAcceptingInfo'].show(row)
      }
    },
  }
}
</script>

<style lang='less' scoped>
  .waitingAccepting {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding:  25px 30px 0 30px;
    background: #fff;
    display: flex;
    flex-direction: column;

    &-header {
      // height: 45px;
      flex: 0 0 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child {
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      box-sizing: border-box;
      .btns {
        .el-button {
          border: 1px solid #249dff;
          border-radius: 12px;
          padding: 5px 16px;
          display: inline-block;
          font-size: 15px;
          line-height: 1;
          color: #249DFF;
        }

        .el-button:hover {
          background:rgba(36,157,255,1);
          color: #fff;
        }
      }
    }
    &-main {
      flex: 1;
      max-height:calc(100% - 115px) ;
    }
    &-bottom {
      flex: 0 0 70px;
      padding-top: 19px;
    }
  }
  .leaveWordDialog {
    width: 50%;
    margin: auto;
    .leaveWord-label {
      display: block;
      margin-bottom: 10px;
    }
    .el-textarea {
      display: block;
      margin-bottom: 20px;
    }
  }
</style>
